<template>
    <Table :id="id" :data-source="dataSourse" :size="size" :columns="Column" :row-selection="rowSelection"
        :pagination="pagination" :scroll="scroll" :rowKey="(record) => record.user_meter_id" :key="key" :rowClassName="setClassName">
        <template #footer v-if="footerBl">
            <div style="text-align:center;">
                <a-button v-for="(item, index) in buttonConfig" :key="index" class="buttonStyle"
                    @click="bottomHandle(item)">
                    {{ item.text }}</a-button>
            </div>
        </template>
    </Table>
</template>
<script lang="ts" setup>
import { ref, unref, toRefs, computed, watch, nextTick } from 'vue';
import { Table } from 'ant-design-vue';
import type { DataType, sizeType } from "../types/index";
import { buttonConfig } from '../enum/index';
import { messageFn } from '/@/store/utils';

const selectedRowKeysRef = ref<any>(); //左侧列表选中项/清空选中项
const props = defineProps<{
    dataSourse: object[] | undefined,
    Column: object[],
    size: sizeType,
    scroll: object,
    pagination: boolean,
    footerBl?: boolean | undefined
    id: string,
    key?:string
}>()
const { Column, size, scroll, id } = props;
const { dataSourse } = toRefs(props);
console.log("scroll",scroll);
const emits = defineEmits(["selectButtonDis", "setRows", "initData", 'changeOrder']);
const rowSelection = computed(() => {
    return {
        selectedRowKeys: unref(selectedRowKeysRef),
        onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRow111222s: ', selectedRows);
            selectedRowKeysRef.value = selectedRowKeys;
            const selectedRowsValue = unref(selectedRows);
            let sendNum: number = 0; let sendBl: boolean = false;
            let selectRowType = 'left'; //默认为左边的数据
            if (selectedRowKeys.length === 0) { //未选中任何选项
                sendBl = true;
            }
            if (id === 'right_id') { //如果是右边
                sendNum = 1;
                selectRowType = 'right';
            }
            emits("selectButtonDis", sendNum, sendBl);
            emits("setRows", selectRowType, selectedRowsValue);
            emits("initData");
        },
        // onSelect: (record, selected, selectedRows, nativeEvent) => {},
        // onSelectAll: (selected, selectedRows, changeRows) => {},
    }
}
)

const bottomHandle = (item: object) => {
    if(!unref(selectedRowKeysRef)) return messageFn('error', '请选择需要移动的项');
    if(selectedRowKeysRef.value.length > 1) return messageFn('error', '只能对一行进行移动排序');
    emits('changeOrder', item)
   
}

const setSelectedRowKeys = () => {
    selectedRowKeysRef.value = [];
}

const setClassName = (record:object)=>{
    return  record.SELECTBL ? "selectTable":"";
}
const setSroll = (type:string,thisList:object[])=>{
  const leftTable:any = document.getElementById("left_id").getElementsByClassName("ant-table-body")[0];
  const rightTable:any = document.getElementById("right_id").getElementsByClassName("ant-table-body")[0];
  let thisScrollHeight:number = 0;
  let tableLength:number|undefined = thisList.length;
  let thisIndex:number = 0;
  for(let i =0; i<tableLength; i++){
    console.log(thisList[i].SELECTBL)
    if(thisList[i].SELECTBL){
        thisIndex = i;
        break;
    }
  }
  console.log("THISinDEND",thisIndex);
  if(type === 'left'){
    console.log(leftTable, leftTable.scrollHeight, 'leftTable.scrollHeight');
    
    thisScrollHeight = leftTable.scrollHeight;
    let thisOneHeight =  thisScrollHeight/tableLength ? thisScrollHeight/tableLength : 0;
    leftTable.scrollTop =  thisOneHeight*thisIndex-300;
  }
  if(type === 'right'){
    thisScrollHeight = rightTable.scrollHeight;
    let thisOneHeight =  thisScrollHeight/tableLength ? thisScrollHeight/tableLength : 0;
    rightTable.scrollTop =  thisOneHeight*thisIndex-300;
  }
}

watch(() => dataSourse.value, (n) => {
  nextTick(() => {
    if (n && n.length > 0) {
      (document.querySelector(`#${props.id} .ant-table-body`) as HTMLElement).style.height = 'calc(100vh - 345px)'
    } else {
      (document.querySelector(`#${props.id} .ant-table-body`) as HTMLElement).style.height = '0'
    }
  })
}, {
  deep: true,
  immediate: true
})

defineExpose({
    setSelectedRowKeys,
    setSroll
})

</script>

<style lang="less" scoped>
.buttonStyle {
    margin: 0 6px;
}

</style>
<style lang="less">
.selectTable{
    background-color: @primary-color !important;
    .ant-table-cell-fix-left{
        background-color: @primary-color !important;
    }
}
#right_id .ant-table-footer {
    padding: 8px 8px;
}
#left_id .ant-table-tbody,#right_id .ant-table-tbody{
    min-height: 500px;
}
</style>
